<template>
	<view class="certification">
		<view v-if="!showAddCert"  class="cert-search">
			<view class="notice">
				提示：您可选择关联已有企业，或者添加认证
			</view>
			<view class="cert-search-input">
				<input
					class="input"
					type="text"
					:value="searchValue"
					confirm-type="搜索"
					placeholder="请输入企业名字"
					@focus="focusSearch"
					@blur="blurSearch"
					@confirm="confirmSearch">
					<uni-icon class="icon" type="search" color="#999" size="20"></uni-icon>
				</input>
			</view>
			<uni-list v-if="companyList.length > 0" class="cert-search-List">
				<uni-list-item
					class="cert-search-List-item"
					v-for="item in companyList"
					:key="item.id"
					:title="item.name"
					:show-arrow="false"
					@click="selectCompany(item.id)">
				</uni-list-item>
			</uni-list>
			<view class="no-data" v-else>
				<image class="no-data-img" src="../../static/images/no-data.png" mode="aspectFit"></image>
				无关联企业
			</view>
			<view class="submit-btn">
				<button v-show="showSubmitBtn" @click="goToShowAddCert">添加认证</button>
			</view>
			
		</view>
		<view v-else class="cert-add">
			<view v-if="certifStatus === 2" class="remark">
				驳回理由: {{remark.length ? remark : '无'}}
			</view>
			<view class="cert-add-tit">企业信息：</view>
			<view class="cert-add-info">
				<view class="cert-add-info-item flex-center-between">
					<text class="cert-add-info-item-name">企业名称</text>
					<input
						class="cert-add-info-item-value"
						type="text"
						:value="companyName"
						placeholder="请输入企业名称"
						data-name="companyName"
						:disabled="certifStatus !== -1"
						@input="inputChange" />
				</view>
				<view class="cert-add-info-item flex-center-between">
					<text class="cert-add-info-item-name">营业执照注册号</text>
					<input
						class="cert-add-info-item-value"
						type="text"
						:value="licenseNumber"
						placeholder="请输入营业执照注册号"
						data-name="licenseNumber"
						:disabled="certifStatus !== -1"
						@input="inputChange" />
				</view>
				<view class="cert-add-info-item flex-center-between">
					<text class="cert-add-info-item-name">法定代表人姓名</text>
					<input
						class="cert-add-info-item-value"
						type="text"
						:value="legalPerson"
						placeholder="请输入法定代表人姓名"
						data-name="legalPerson"
						:disabled="certifStatus !== -1"
						@input="inputChange" />
				</view>
			</view>
			<view class="cert-add-tit">上传营业执照：</view>
			<view class="cert-add-upload">
				<image
					class="cert-add-upload-img"
					:src="licenseImgUrl"
					mode="aspectFill"
					@click="uploadImage">
				</image>
				<view class="cert-add-upload-notice">
					请确保上传的照片边框完整、字体清晰、亮度均匀
				</view>
			</view>
			<view v-if="certifStatus === -1" class="btns">
				<button class="btn-again" @click="addCompanyInfo">申请</button>
			</view>
			<view v-if="certifStatus === 0" class="btns">
				<button class="btn-cancel" @click="deleteCompanyLink">取消申请</button>
			</view>
			<view v-if="certifStatus === 2" class="btns flex-center-between">
				<button class="btn-cancel" @click="deleteCompanyLink">取消申请</button>
				<button class="btn-again" @click="addCompanyInfo">重新申请</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list.vue'
	import uniListItem from '@/components/uni-list-item.vue'
	import uniIcon from "@/components/uni-icon.vue"
	export default {
		components: {
			uniList,
			uniListItem,
			uniIcon,
		},
		data() {
			return {
				isEnterprise: null, //1.true：添加的认证; 2.false：绑定的认证
				certifStatus: null,
				showAddCert: false,
				searchValue: '',
				showSubmitBtn: true,
				companyList: [],
				id: null,
				companyName: '',
				licenseNumber: '',
				legalPerson: '',
				licenseImgUrl: '',
				remark: '',
			}
		},
		onLoad() {
			this.getCertifcation()
		},
		methods: {
			/**
			 * 获取企业信息
			 */
			async getCompanyList() {
				if(!this.searchValue){
					uni.showToast({
						title: '企业名称不能为空！',
						icon: 'none'
					})
					return
				}
				let res = await this.$http.request({
					method: 'post',
					url: '/api/enterprise/list',
					data: {
						page: 1,
						row: 99,
						search: this.searchValue
					}
				})
				if (res.status === 1) {
					this.companyList = res.data.list
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 获取企业认证信息
			 */
			async getCertifcation() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/enterprise/my',
					data: {}
				})
				if (res.status === 1) {
					if(Object.keys(res.data).length === 0) {
						this.certifStatus = -1
						// this.getCompanyList()
						this.licenseImgUrl = '../../static/images/certification-unload.png'
					} else {
						this.id = res.data.baseInfo.id
						this.companyName = res.data.baseInfo.name
						this.licenseNumber = res.data.baseInfo.number
						this.legalPerson = res.data.baseInfo.delegate
						this.licenseImgUrl = this.$baseUrl + res.data.baseInfo.license
						this.remark = res.data.remark
						this.certifStatus = res.data.status
						this.isEnterprise = res.data.is_enterprise
						this.goToShowAddCert()
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 添加企业信息
			 */
			async addCompanyInfo() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/enterprise/add',
					data: {
						name: this.companyName,
						number: this.licenseNumber,
						delegate: this.legalPerson,
						license: this.licenseImgUrl.replace(this.$baseUrl, '').trim()
					}
				})
				if (res.status === 1) {
					this.pageBack()
					uni.showToast({
						title: '申请已提交',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 解除企业关联
			 */
			async deleteCompanyLink() {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/enterprise/cancel',
					data: { id: this.id }
				})
				if (res.status === 1) {
					uni.switchTab({ url: '/pages/user/user' })
					uni.showToast({
						title: '取消企业关联',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 企业关联
			 */
			async bindCompany(id) {
				let res = await this.$http.request({
					method: 'post',
					url: '/api/enterprise/apply',
					data: { id: id }
				})
				if (res.status === 1) {
					this.pageBack()
					uni.showToast({
						title: res.message,
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 搜索框获取焦点
			 */
			focusSearch(){
				this.showSubmitBtn = false
			},
			/**
			 * 搜索框失去焦点
			 */
			blurSearch(){
				this.showSubmitBtn = true
			},
			/**
			 * 确认搜索
			 * @param {Object} e
			 */
			confirmSearch(e){
				this.searchValue = e.detail.value
				this.getCompanyList()
			},
			/**
			 * 监听表单输入框变化
			 * @param {Object} e
			 */
			inputChange(e) {
				this[e.target.dataset.name] = e.detail.value
			},
			/**
			 * 上传图片
			 */
			uploadImage() {
				if (this.certifStatus !== -1) {
					return
				}
				uni.chooseImage({
					count: 1, //默认9
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths
						uni.uploadFile({
							url: this.$baseUrl + '/api/upload/picture',
							filePath: tempFilePaths[0],
							name: 'images',
							header: {
								'content-type': 'multipart/form-data',
								'token': uni.getStorageSync('USER_INFO').token || '',
								'way': 'app',
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes.data)
								this.licenseImgUrl = this.$baseUrl + uploadFileRes.data
							},
							fail: (err) => {
								uni.showToast({
									title: '上传失败' + err,
									icon: 'none'
								})
							}
						});
					}
				});
			},
			/**
			 * 选择公司
			 * @param {Number} id
			 */
			selectCompany(id) {
				uni.showModal({
					title: '提示',
					content: '是否与该企业进行关联？',
					success: res => {
						if (res.confirm) {
							this.bindCompany(id)
						}
					}
				});
			},
			/**
			 * 显示添加企业认证页
			 */
			goToShowAddCert() {
				this.showAddCert = true
			},
			/**
			 * 跳转
			 * @param {String} page
			 */
			pageTo(page) {
				uni.navigateTo({
					url: page
				});
			},
			/**
			 * 返回
			 */
			pageBack() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss">
	.certification {
		height: 100%;
		.cert-search{
			background: $uni-bg-color;
			height: 100%;
			.notice{
				width: 100%;
				margin: 0 auto;
				box-sizing: border-box;
				padding: 20rpx 40rpx;
				background: #fff6e5;
				border-radius: $uni-border-radius-sm1;
				font-size: $uni-font-size-sm2;
			}
			&-input{
				padding: 20rpx 35rpx;
				position: relative;
				.input{
					height: 60rpx;
					background: $uni-bg-color-grey;
					border-radius: 30rpx;
					padding-left: 60rpx;
				}
				.icon{
					position: absolute;
					top: 50%;
					left: 50rpx;
					margin-top: -20rpx;
				}
			}
			&-list{
			}
			.submit-btn{
				position: fixed;
				bottom: 0;
				left: 30rpx;
				right: 30rpx;
			}
		}
		.cert-add{
			height: 100%;
			background: $uni-bg-color-grey;
			.cert-add-tit{
				padding: 30rpx;
			}
			.cert-add-info{
				background: $uni-bg-color;
				.cert-add-info-item{
					padding: 0 30rpx;
					height: 110rpx;
					border-bottom: 1rpx solid $uni-border-color;
					.cert-add-info-item-name{
						width: 220rpx;
						color: $uni-text-color-grey2;
					}
					.cert-add-info-item-value{
						text-align: right;
					}
				}
			}
			.cert-add-upload{
				padding: 40rpx;
				.cert-add-upload-img{
					width: 426rpx;
					height: 252rpx;
					display: block;
					margin: 20rpx auto;
					background: $uni-bg-color-grey2;
					
				}
				.cert-add-upload-notice{
					text-align: center;
					color: $uni-text-color-grey;
					font-size: $uni-font-size-sm1;
				}
			}
			
			.remark{
				width: 100%;
				margin: 0 auto;
				box-sizing: border-box;
				padding: 20rpx 40rpx;
				background: #fff6e5;
				color: #f74c45;
				border-radius: $uni-border-radius-sm1;
				font-size: $uni-font-size-sm2;
			}
			.btns{
				padding: 30rpx;
				button{
					height: 95rpx;
					line-height: 95rpx;
					width: 100%;
					font-size: $uni-font-size-lg1;
					border-radius: $uni-border-radius-lg;
				}
				.btn-cancel{
					margin-right: 30rpx;
					color: $uni-text-color-inverse;
					background-color: #f74c45;
				}
				.btn-again{
					color: $uni-text-color-inverse;
					background-color: $uni-color-theme;
				}
			}
		}
	}
</style>
